<template>
  <div>
    <div style="zindex:999"><canvas id="minimap"></canvas></div>
    <div style="width:600px;height:800px;margin:0 auto;zindex:998">
      <canvas id="canvas"></canvas>
    </div>

    <img v-show="false" :src="$store.state.app.previewImg" />
    <canvas v-show="false" id="CCCC"></canvas>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import initAligningGuidelines from "@/utils/guidelines.js";
import initManager from "@/utils/overlines.js";
import { debounce } from "@/utils/core.js";

export default {
  data() {
    return {
      self: null,
      dpr: window.devicePixelRatio
    };
  },
  computed: {},
  mounted() {
    console.log("mounted canvas");

    // basic settings
    // fabric.Object.prototype.customiseCornerIcons(
    //   {
    //     settings: {
    //       borderColor: "#0094dd",
    //       cornerSize: 25,
    //       cornerShape: "rect",
    //       cornerBackgroundColor: "black"
    //     }
    //     // tl: {
    //     //   icon: "//maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png"
    //     // },
    //     // tr: {
    //     //   icon: "//maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png"
    //     // },
    //     // ml: {
    //     //   icon: "//maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png"
    //     // },
    //     // mr: {
    //     //   icon: "//maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png"
    //     // },
    //     // // only is hasRotatingPoint is not set to false
    //     // mtr: {
    //     //   icon: "//maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png"
    //     // }
    //   },
    //   function() {
    //     canvas.renderAll();
    //   }
    // );

    //初始化画布背景
    const canvas = (this.self = new fabric.Canvas("canvas", {
      backgroundColor: "rgba(220,220,220,1)"
    }));

    fabric.Object.prototype.objectCaching = false;
    //设置canvas
    this.initCanvas(canvas);

    fabric.Object.prototype.set({
      borderColor: "red",
      cornerColor: "red", //激活状态角落图标的填充颜色
      cornerStrokeColor: "", //激活状态角落图标的边框颜色
      borderOpacityWhenMoving: 1,
      borderScaleFactor: 1,
      cornerSize: 8,
      cornerStyle: "circle", //rect,circle
      centeredScaling: false, //角落放大缩小是否是以图形中心为放大原点
      centeredRotation: true, //旋转按钮旋转是否是左上角为圆心旋转
      transparentCorners: false, //激活状态角落的图标是否透明
      rotatingPointOffset: 5, //旋转距旋转体的距离
      //这里会影响到后面的对齐.... 默认都是 top left
      //   originX: "center",
      //   originY: "center",
      lockUniScaling: false, //只显示四角的操作
      hasRotatingPoint: true, //是否显示旋转按钮
      selectionDashArray: [5, 5]
    });

    canvas.selection = true;
    // canvas.hasControls = false
    // canvas.borderColor = '#ff8d23'
    canvas.preserveObjectStacking = true; // 禁止选中图层时自定置于顶部

    //以中心点作为缩放
    canvas.centeredScaling = true;

    //这里是毫米，物体长宽毫米
    let designSize = { width: 420, height: 285 };

    //出血大小
    let chuxie = 3;

    let canvasWidth = 800, //画布大小
      canvasHeight = 600,
      currentScale = 0.8, //初始化显示比例
      workWidth = (designSize.width * 96) / 25.4 + 0.5,
      workHeight = (designSize.height * 96) / 25.4 + 0.5,
      workWidthNew = workWidth,
      workHeightNew = workHeight;

    let zoom = 1;

    //canvas 总是屏幕大小 内部元素居中
    //(210 * 96) / 25.4
    canvas.setWidth(canvasWidth);
    canvas.setHeight(canvasHeight);

    //根据图像大小，考虑缩略图的大小
    //定义一个缩略图
    const minimap = new fabric.Canvas("minimap", {
      //containerClass: "minimap",
      selection: false,
      backgroundColor: "black"
    });

    let minWidth = 0,
      minHeight = 0,
      minScale = 1.2;
    {
      let constLength = 100;

      //把图像缩小到比例框里面
      if (workWidth > workHeight) {
        minWidth = workWidth / (workHeight / constLength);
        minHeight = constLength;
      } else {
        minHeight = workHeight / (workWidth / constLength);
        minWidth = constLength;
      }
    }

    //初始化大小，把图像缩放到里面
    minimap.setWidth(minWidth * minScale);
    minimap.setHeight(minHeight * minScale);

    //判断缩放
    if (canvasWidth < workWidth || canvasHeight < workHeight) {
      //按照长边缩放
      if (workWidth / canvasWidth > workHeight / canvasHeight) {
        zoom = workWidth / (canvasWidth * currentScale);
        workWidthNew = canvasWidth * currentScale;
        workHeightNew = workHeight / zoom;
      } else {
        //按照高度缩放
        zoom = workHeight / (canvasHeight * currentScale);
        workWidthNew = workWidth / zoom;
        workHeightNew = canvasHeight * currentScale;
      }
    }

    //初始化画布大小，这里面居中，应该是实时绘制??

    //+100
    //加入一个对象，不让拖动
    var rect = new fabric.Rect({
      left: ((canvasWidth - workWidthNew) / 2) * zoom,
      top: ((canvasHeight - workHeightNew) / 2) * zoom,
      originX: "left",
      originY: "top",
      width: workWidth,
      height: workHeight,
      fill: "rgba(255,255,255,1)",
      selectable: false,
      transparentCorners: false,
      evented: false,
      excludeFromExport: true,
      hasControls: false,
      perPixelTargetFind: false,
      lxwname: "_lxw_",
      type: "_lxw_bg"
    });

    //缩放 再继续缩小到currentScale
    canvas.setZoom(1 / zoom);
    canvas.add(rect);

    //改变窗口的时候，canvas也改变，中间的画布也改变大小
    //通过缩略图进行内容导航，不要增加滚动条
    this.addcanvasEventListener(canvas);

    initAligningGuidelines(canvas);
    initManager(canvas, minimap, this.$store);
    //var debouncedMiniMap = debounce(updateMiniMap, 250);

    //initMinimap();
    // updateMiniMapVP();
    canvas.requestRenderAll();

    //加入到hisrory
    this.saveState();
  },
  beforeDestroy() {
    console.log("beforeDestroy canvas");
  },
  methods: {
    ...mapActions(["initCanvas", "setSelectedObj", "saveState"]),

    addcanvasEventListener(canvas) {
      let ctx = canvas.getSelectionContext();

      canvas.on("object:added", e => {
        //console.log("object:added", e.target);
      });

      canvas.on("object:modified", e => {
        //console.log("object:modified");
        this.saveState();
      });

      //移除的时候记录??可以考虑批量记录。这里可以考虑优化
      canvas.on("object:removed", e => {
        //console.log("object:removed");
        //this.saveState();
      });
      // canvas.on('object:selected', (e) => {
      //   console.log('object:selected', e.target)
      //   this.setSelectedObj(e.target)
      // })
      canvas.on("selection:created", e => {
        //console.log("selection:created", e.target);
        this.setSelectedObj(e.target);
      });
      canvas.on("selection:updated", e => {
        //console.log("selection:updated", e.target);
        this.setSelectedObj(e.target);
      });
      canvas.on("selection:cleared", e => {
        //console.log("selection:cleared");
        this.setSelectedObj(null);
      });
    }
  }
};
</script>

<style scoped>
#minimap {
  position: absolute !important;
  top: 20px;
  left: 20px;
}
#canvas {
  border: 1px solid black;
}
</style>
